.page-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

// 日期 --------------------------------------
.week-container {
  height: 234rpx;
  margin: 20rpx 20rpx 0 20rpx;
  border-radius: 20rpx;
  overflow: hidden;
  flex: none;
  background: linear-gradient(123deg, #e2ffed 24%, #f5f5ff 35%, #fdfff4 53%, #f1fff2 66%);
  // box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3), inset 0px 0px 12px 0px #ffffff;
  .top-box {
    height: 84rpx;
    display: flex;
    font-size: 40rpx;
    font-weight: bold;
    // color: #0d833b;
    color: #669703;
    overflow: hidden;
    .item {
      width: 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      &.not-active {
        background-color: #d9d9d9 !important;
        color: #666 !important;
        .radius {
          display: none;
        }
      }
    }
    .left {
      margin-right: 30rpx;
      position: relative;
      .radius {
        position: absolute;
        top: -50rpx;
        right: -95rpx;
        transform: rotate(-20deg);
        width: 60rpx;
        height: 200rpx;
        background-color: #d9d9d9;
        display: block;
      }
    }
    .right {
      margin-left: 30rpx;
      position: relative;
      .radius {
        position: absolute;
        top: -50rpx;
        left: -95rpx;
        transform: rotate(20deg);
        width: 60rpx;
        height: 200rpx;
        background-color: #d9d9d9;
        display: block;
      }
    }
  }

  .bottom-box {
    height: 150rpx;
    padding: 0 20rpx;
  }
  .week-box {
    height: 100%;
    display: flex;
    align-items: center;
    .item {
      width: 104rpx;
      height: 104rpx;
      flex: none;
      border-radius: 16rpx;
      margin-right: 10rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      &:last-child {
        margin-right: 0;
      }
      &.selected {
        color: #fff;
        // background-color: #3fb66d;
        background-color: #71a804;
      }
      .week {
        font-weight: bold;
      }
    }
  }
}
// 选择场馆 -------------------------------
.select-venue-container {
  height: 0;
  flex: 1;
  margin: 20rpx 20rpx 0 20rpx;
  padding: 0 30rpx 20rpx 0;
  border-radius: 20px;
  background: linear-gradient(155deg, #e2ffed 26%, #f5f5ff 42%, #fdfff4 67%, #f1fff2 84%);
  // box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3), inset 0px 0px 12px 0px #ffffff;

  font-size: 24rpx;
  display: flex;
  flex-direction: column;

  // 第一行 --------------------------------
  .top-container {
    flex: none;
    width: 100%;
    height: 70rpx;

    display: flex;
  }
  .top-left-box {
    position: relative;
    flex: none;
    height: 100%;
    width: 165rpx;
    font-size: 24rpx;
    color: #999;
    .top-time {
      position: absolute;
      bottom: 10rpx;
      left: 35rpx;
    }
    .top-line {
      position: absolute;
      top: 40rpx;
      left: 30rpx;
      transform: rotate(25deg);
      width: 130rpx;
      height: 0;
      border-top: 0.5px solid #999;
    }
    .top-room {
      position: absolute;
      right: 17rpx;
      top: 15rpx;
    }
  }
  .top-right-box {
    width: 0;
    height: 100%;
    flex: 1;
    overflow: hidden;
    .slider-box {
      transition: transform 0.1s ease-out;
      margin-left: -10rpx;
      display: flex;
      height: 70rpx;
      view {
        height: 100%;
        width: 100rpx;
        flex: none;
        text-align: center;
        line-height: 80rpx;
      }
    }
  }

  // 下面选择场地 -------------------------------------
  .bottom-box1 {
    width: 100%;
    height: 0;
    flex: 1;
  }
  .bottom-box2 {
    display: flex;
    justify-content: space-between;
  }
  .time-container {
    width: 165rpx;
    flex: none;
    .time-item {
      width: 100%;
      padding-right: 20rpx;
      text-align: right;
      height: 60rpx;
      line-height: 60rpx;
      &.expensive {
        color: #ff7b00;
      }
    }
  }

  .venue-container1 {
    width: 0;
    flex: 1;
  }
  .venue-container2 {
    margin-left: -10rpx;
    .line-item {
      display: flex;
      height: 60rpx;
    }
    .item-box {
      height: 100%;
      width: 100rpx;
      flex: none;
      display: flex;
      justify-content: center;
      align-items: center;
      .item {
        width: 70rpx;
        height: 46rpx;
        border-radius: 8rpx;
        border: 1px solid #71a804;
      }
    }
  }
}
// .scroll-box {
//   position: absolute;
//   background-color: #cfdbd4;
//   border-radius: 10rpx;
//   view {
//     background-color: #7f9989;
//     border-radius: 10rpx;
//   }
// }
// .scroll-box1 {
//   top: 130rpx;
//   right: 20rpx;
//   width: 20rpx;
//   height: 500rpx;
//   view {
//     width: 100%;
//     height: 300rpx;
//   }
// }
// .scroll-box2 {
//   bottom: 20rpx;
//   left: 150rpx;
//   width: 450rpx;
//   height: 20rpx;
//   view {
//     width: 300rpx;
//     height: 100%;
//   }
// }

// 支付 -------------------------------------------------
.pay-container {
  transition: height 0.1s ease-in-out;
  flex: none;
  background-color: #fff;
  margin-top: 20rpx;
  padding: 10rpx 30rpx;
  border-radius: 10px 10px 0px 0px;
  // box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3), 0px -1px 0px 0px rgba(216, 216, 216, 0.3);
  // .top-text {
  //   color: #999;
  //   // font-size: 28rpx;
  // }
  .book-select-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 24rpx;
    .item {
      margin-top: 8rpx;
      display: flex;
    }
    .time {
      width: 142rpx;
    }
    .venue {
      width: 110rpx;
    }
    .price {
      width: 55rpx;
    }
  }

  .btn-box {
    display: flex;
    justify-content: space-between;
    margin-top: 15rpx;
    .left-box {
      display: flex;
      align-items: baseline;
      .b-l-text {
        font-size: 28rpx;
      }
      .money {
        font-size: 44rpx;
        color: #71a804;
        font-weight: bold;
      }
    }
  }

  .pay-btn {
    color: #333 !important;
    font-weight: bold !important;
    display: block !important;
    width: 300rpx !important;
    height: 68rpx !important;
    line-height: 68rpx !important;
    border-radius: 47rpx !important;
    background: linear-gradient(90deg, #6ff5ff 0%, #5eff90 100%);
  }
  .pay-btn-hover {
    background: linear-gradient(90deg, #94f3fa 0%, #88fdad 100%);
    color: #555 !important;
  }
}

// book样式 ----------------------------------------
.icon-success {
  display: none;
}
// .select-hint-container {
//   .MY_BOOKED {
//     .icon-success {
//       display: block;
//       width: 80%;
//     }
//   }
// }
.CAN_BOOK {
  border: 1px solid #ccc;
}
.CAN_NOT_BOOK {
  background-color: #aaa !important;
  border: none !important;
}
.MY_BOOKED {
  background-color: #71a804;
  display: flex;
  justify-content: center;
  align-items: center;
  .icon-success {
    display: block;
    width: 60%;
  }
}
.MY_SELECTED {
  background-color: #71a804;
}
